<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){

	  
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
            js组件
        </h1>
        <p class="page-hd-desc"></p>
    </div>
   <div class="page-bd-15">
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">Toast 成功</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-cancel">Toast 取消</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-3">Toast 警告</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoading">Toast Loading </a>
        
         <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd1">Dialog alert</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd2">Dialog  confirm</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd3">Dialog  prompt</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd4">Dialog  自定义</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd5">toptips默认</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary" onclick="$.toptips('我是绿色提示','ok')">toptips ok或success</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary"  onclick="$.toptips('我是黑色提示','info')">toptips info</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary"  onclick="$.toptips('我是橙色提示','warning')">toptips warning</a>
    </div>

 <script>
 

 $(document).on("click", "#showToast", function() {
        $.toast("操作成功");
      }); 

  $(document).on("click", "#show-toast-cancel", function() {
        $.toast("取消操作", "cancel");
      });
  $(document).on("click", "#show-toast-3", function() {
        $.toast("禁止操作", "forbidden");
      });
$(document).on("click", "#showLoading", function() {
        $.showLoading();

        setTimeout(function() {
          $.hideLoading();
        }, 3000)
      });     

$(document).on("click", "#sd1", function() {
        $.alert("弹出对话框就是好", "标题");
      });
      $(document).on("click", "#sd2", function() {
        $.confirm("您确定要删除吗?", "确认删除?", function() {
          $.toast("删除成功!");
        }, function() {
          //取消操作
        });
      });
      $(document).on("click", "#sd3", function() {
        $.prompt("输入昵称看看", "你的昵称", function(text) {
          $.alert("您的昵称是:"+text, "哦");
        }, function() {
          //取消操作
        });
      });
      $(document).on("tap", "#sd4", function() {
        $.modal({
          title: "支付方式",
          text: "选择你的支付方式",
          buttons: [
            { text: "支付宝", onClick: function(){ $.alert("你选择了支付宝"); } },
            { text: "微信支付", onClick: function(){ $.alert("你选择了微信支付"); } },
            { text: "取消", className: "default"},
          ]
        });
      });      
  

$(function(){
$(document).on("click", "#sd5", function() {
        $.toptips("错误提示");
      });

})



   
  </script>  
</body>
</html>
